<template>

  <a-table :columns="columns" :data-source="data" :row-selection="rowSelection">

    <template #bodyCell="{ column ,record}">
      <template v-if="column.key === 'action'">
        <span>
          <a @click="kan(record)">查看</a>
        </span>
      </template>
    </template>

  </a-table>
  <a-checkbox-group v-model:value="valuec" style="width: 100%">
    <a-checkbox :value="item.id" v-for="item in userList"> {{ item.name }}</a-checkbox>
  </a-checkbox-group>
  <div>


  </div>
  <a @click="bj">编辑</a>


  <br/><br/>

  <div v-for="item in curlist">
    {{ item.username }}<span v-if="item.isMan" style="color: #f00">管理人</span> <a
      v-if="item.isMan" @click="delMan(item)">取消管理人</a><a
      v-if="!item.isMan" @click="setMan(item)">设置管理人</a>

  </div>
</template>
<script lang="ts">
import {defineComponent, ref, reactive, toRefs} from 'vue';
import {getOrganization, getOrganizationid, GetuserList, editosam, setman, delman} from "@/http/mockTest";


const columns = [
  {
    title: 'name',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'perms',
    dataIndex: 'perms',
    key: 'perms',

  },
  {
    title: 'path',
    dataIndex: 'path',
    key: 'path',

  },
  {
    title: 'component',
    dataIndex: 'component',
    key: 'component',

  },
  {
    title: 'parentId',
    dataIndex: 'parentId',
    key: 'parentId',
  },
  {
    title: "操作",
    dataIndex: "action",
    key: "action",
  },
];


const rowSelection = ref({
  checkStrictly: false,
  onChange: (selectedRowKeys: (string | number)[], selectedRows: any) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  },
  onSelect: (record: any, selected: boolean, selectedRows: any) => {
    console.log(record, selected, selectedRows);
  },
  onSelectAll: (selected: boolean, selectedRows: any, changeRows: any) => {
    console.log(selected, selectedRows, changeRows);
  },
});

export default defineComponent({
  setup() {
    const state: any = reactive({
      data: [],
      curlist: [],
      userList: [],

    })
    const valuec = ref([]);
    const id: any = ref(0);

    const kan = (r) => {
      getOrganizationid(r.id).then((res: any) => {

        id.value = r.id
        state.curlist = res
        valuec.value = res.map(i => i.userId)
      })
    }
    getOrganization().then((res: any) => {
      state.data = res
    })

    const bj = (r) => {
      editosam(id.value, valuec.value).then(res => {

        getOrganizationid(id.value).then((res: any) => {

          state.curlist = res
          valuec.value = res.map(i => i.userId)
        })

      })
    }

    const setMan = (r) => {
      setman({
        userId: r.userId,
        organId: id.value
      }).then(res => {

        getOrganizationid(id.value).then((res: any) => {

          state.curlist = res
          valuec.value = res.map(i => i.userId)
        })
      })
    }

    const delMan = (r) => {
      delman(r.manId).then(res => {

        getOrganizationid(id.value).then((res: any) => {

          state.curlist = res
          valuec.value = res.map(i => i.userId)
        })
      })
    }


    GetuserList().then((res: any) => {
      state.userList = res
    })
    return {
      kan,
      ...toRefs(state),
      columns,
      rowSelection,
      valuec,
      id,
      setMan,
      delMan,
      bj
    };
  },
});
</script>

